<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>项目类别查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/jquery.js"></script>

</head>

<body>

<div class="soBox">
    <form action="/search" method="post" id="searchBox">
        {{ csrf_field() }}
        <input type="search" id="searchipt" name="searchipt" placeholder="请输入查询内容" class="so-inp">
        <a type="button" id="searchbut" class="so-btn">  搜索  </a>
    </form>
</div>

<div class="menu_list" id="firstpane">
    <ul>
        @foreach($types as $type)

        <li class="menu_head current" id="head-{{ $type->id }}">
            <a href="javascript:void(0)">{{ $type->title }}</a>
        </li>
        <div class="menu_body" style="display: none;">
            <ul data-role="listview" class="J_listview_two J_listview_five" id="body-{{ $type->id }}">
                @foreach($type->children as $child)
                <li data-icon="false">
                    <a href="/type/{{ $child->id }}">{{ $child->title }}</a>
                </li>
                @endforeach
            </ul>
        </div>
        @endforeach

</div>
<script>
    $('#searchbut').click(function () {
        $('#searchBox').submit();
    });
    $(function () {
        $("#firstpane li.menu_head").click(function () {
            var $this = $(this);
            var style = $this.next("div.menu_body").attr('style');
            var sa = -1;
            if (style) {
                sa = style.indexOf('display: none');
            }
            $this.addClass("current").next("div.menu_body").slideToggle(500).siblings("div.menu_body").slideUp("slow");
            $this.siblings().removeClass("current");

            if (sa == -1) {
                $this.removeClass("current");
            }

        });
    });

</script>

</body>
</html>